<template>
  <div id="class">
    <top-search></top-search>
    <div class="leftlist">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="(item, index) in cateList"
          :title="item.catename"
          :key="item.id"
          @click="onClick(index)"
        />
      </van-sidebar>
    </div>
    <div class="mainlist">
      <div class="box">
        <p class="title">{{ title }}</p>
        <div class="itemlist">
          <ul>
            <li
              v-for="item in mainList"
              :key="item.id"
              @click="goItemList(item.id)"
            >
              <img :src="item.img" alt="" />
              <p>{{ item.catename }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { CateList, GetGoodList } from "../util/request/api";
import { mapActions } from "vuex";
import topSearch from "../components/topsearch.vue";
export default {
  data() {
    return {
      cateList: [],
      mainList: [],
      title: "",
      activeKey: 0,
    };
  },
  components: {
    topSearch,
  },
  methods: {
    ...mapActions(["changeAction"]),
    onClick(idx) {
      this.mainList = this.cateList[idx].children;
      this.title = this.cateList[idx].catename;
    },
    goItemList(id) {
      GetGoodList({ cateid: id }).then((res) => {
        let newList;
        if (!res.list.goodData) {
          newList = [];
        } else {
          newList = res.list.goodData;
        }
        this.changeAction(newList);
      });
      this.$router.push("/goodlist");
    },
  },
  mounted() {
    CateList()
      .then((res) => {
        if (res.code != 200) {
          return;
        }
        this.cateList = res.list;
        this.mainList = this.cateList[0].children;
        this.title = this.cateList[0].catename;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
@import url("../assets/css/class.css");
</style>